<template>
	<view class="common-list m-f animate__animated animate__slideInLeft animate__faster" :key="index">
		<view class="common-list-l">
			<image :src="item.userpic" mode="aspectFill" lazy-load></image>
		</view>
		<view class="common-list-r">
			<view class="m-f-jsb">
				<view class="m-f-ac my-title">
					{{item.username}}
					<tag-sex-age :age="getAge" :sex="getSex"></tag-sex-age>
				</view>
				<view v-show="!item.isguanzhu" class="icon iconfont icon-jiahao guanzhu" @tap="guanzhu">关注</view>
			</view>
			<view class="list-r-time" v-show="item.create_time">{{item.create_time}}</view>
			<view class="common-title">{{item.content}}</view>
			<view class="r-image m-f-jcc" style="flex-direction: column;">
				<block v-for="(ele, index) in item.morepic" :key="index">
					<!-- 图片 -->
					<image :src="ele" mode="widthFix" lazy-load @tap="imgDetail(index)" style="margin-bottom: 20rpx;"></image>
				</block>
				<!-- 视频 -->
				<template v-if="item.video">
					<view class="common-list-play icon iconfont icon-bofang"></view>
					<view class="common-list-playinfo">
						{{item.video.looknum}} {{item.video.long}}
					</view>
				</template>
				<!-- 分享 -->
				<template v-if="item.share">
					<view class="common-list-share m-f-ac">
						<image :src="item.share.titlepic" mode="widthFix" lazy-load></image>
						<view class="">
							{{item.share.title}}
						</view>
					</view>
				</template>
			</view>
			<view class="m-f-jsb common-bottom">
				<view class="">
					{{item.path}}
				</view>
				<view class="m-f-jcc common-bottom-r">
					<view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
					<view class="icon iconfont icon-pinglun">{{item.commentnum}}</view>
					<view class="icon iconfont icon-dianzan" @tap="caozuo('ding')">{{item.goodnum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tagSexAge from '../common/tag-sex-age.vue'
	export default {
		components: {
			tagSexAge
		},
		props: {
			item: {
				type: Object
			},
			index: {
				type: Number
			}
		},
		computed: {
			getSex() {
				return this.item.sex
			},
			getAge() {
				return this.item.age
			}
		},
		methods: {
			async guanzhu() { // 关注
				try{
					let [err, res] = await this.$http.post('/follow', {
						follow_id: this.item.userid
					}, {
						token: true,
						checkToken: true,
						checkAuth: true
					})
					// 错误处理
					if (!this.$http.errorCheck(err, res)) {
						return
					}
					// 关注成功
					uni.showToast({ title: '关注成功' })
					// 通知首页修改状态
					let resdata = {
						type: 'guanzhu',
						userid: this.item.userid,
						data: true
					}
					// 通知父组件
					this.$emit('changeevent', resdata)
					// 全局通知
					uni.$emit('updateData', resdata)
				}catch(e){
					return
				}
			},
			imgDetail(index) { // 点击图片预览图片
				uni.previewImage({
					current: index,
					urls: this.item.morepic
				})
			},
			async caozuo(type) { // 顶踩
				try{
					let index = (type === 'ding') ? 1 : 2 // 当前操作
					let [err, res] = await this.$http.post('/support', {
						post_id: this.item.id,
						type: index - 1
					}, {
						token: true,
						checkToken: true,
						checkAuth: true
					})
					// 错误处理
					if (!this.$http.errorCheck(err, res)) return
					uni.showToast({
						title: '顶成功'
					})
					let resdata = {
						type: 'support',
						post_id: this.item.id,
						do: type
					}
					// 通知父组件
					this.$emit('changeevent', resdata)
					// 通知全局
					return uni.$emit('updateData', resdata)
				}catch(e){ return }
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/lists.scss';
	.common-list {
		border-bottom: 1rpx solid #EEEEEE;
		.common-list-r {
			border-bottom: 0;
			.list-r-time {
				padding: 15rpx 0;
				color: #CCCCCC;
				font-size: 28rpx;
			}
		}
	}
</style>
